 <template>
 	<!-- 申请退款 -->
 	<view>
 		<c-navBar title="申请退款" is-tran isPerch></c-navBar>
 		<view class="co-bg"></view>

 		<!-- <view class="address">
			<view class="df aic">
				<image class="ad-icon" :src="require('../../person/static/address-icon.png')" mode=""></image>
				<view>
					<view class="ad-info">张三三 15846895512</view>
					<view class="ad-font">四川省成都市高新区茂业中心B座XXXXXXXXX公司...</view>
				</view>
			</view>
		</view> -->

 		<view class="sc-shop" v-if="option.type==2" v-for="(item,index) in orederData.orderItemList" :key="index">
 			<view class="sc-img">
 				<image :src="item.cover" mode=""></image>
 				<!-- <view class="sc-end">距结束：23:56:39</view> -->
 			</view>
 			<view class="sc-right">
 				<view class="sc-title otw">{{item.title}}</view>
 				<view class="sc-text">已选：{{item.propertiesName}}</view>
 				<view class="df aife jcsb mt10">
 					<view class="sc-price"><text>￥</text>{{item.goodsPrice}}</view>
 					<view class="sc-num">x{{item.payNum}}</view>
 				</view>
 			</view>
 		</view>
 		<view class="sc-shop" v-if="option.type==1">
 			<view class="sc-img">
 				<image :src="orederData.cover" mode=""></image>
 				<!-- <view class="sc-end">距结束：23:56:39</view> -->
 			</view>
 			<view class="sc-right">
 				<view class="sc-title otw">{{orederData.title}}</view>
 				<view class="sc-text">已选：{{orederData.propertiesName}}</view>
 				<view class="df aife jcsb mt10">
 					<view class="sc-price"><text>￥</text>{{orederData.goodsPrice}}</view>
 					<view class="sc-num">x{{orederData.payNum}}</view>
 				</view>
 			</view>
 		</view>

 		<view class="expense">
 			<view class="ex-box" style="height: 88rpx;">
 				<view class="ex-title">包装完好无损，不影响二次销售</view>
 				<view class="ex-text">
 					<image v-if="numIcon" @click="selectIcon(2)" style="width: 24rpx;"
 						src="../../../static/tabbar/opt-no.png" mode="widthFix"></image>
 					<image v-else @click="selectIcon(1)" style="width: 24rpx;height: 24rpx;" src="../../../static/tabbar/opt.png"
 						mode=""></image>

 				</view>
 			</view>
 			<view class="ex-box">
 				<view class="ex-title">退货原因</view>
 				<view class="ex-check" @click="reasonShow=true">
 					<view>{{form.reaFont||'请选择'}}</view>
 					<image style="width: 20rpx;" :src="require('../static/go.png')" mode="widthFix"></image>
 				</view>
 			</view>
 			<view class="ex-box">
 				<view class="ex-title">退款金额</view>
 				<view class="ex-text">￥{{orederData.refundAmount}}</view>
 			</view>
		
 				<view class="ex-box">
 					<view class="ex-title">退还积分</view>
 					<view class="ex-text">{{orederData.refundRattan}}积分</view>
 				</view>
 			

 			<view class="ex-remark">
 				<view class="ex-title fw">退货说明（选填）</view>
 				<view class="ex-area">
					<u--textarea v-model="form.remark" placeholder="请输入退货原因" ></u--textarea>
 				</view>
 			</view>

 			<view class="ex-remark">
 				<view class="ex-title fw">上传图片（选填）</view>
 				<view class="ex-inner">
 					<c-upLoadImgs :file.sync="images" maxCount='6' width='160rpx' height="160rpx"></c-upLoadImgs>
 				</view>
 			</view>
 		</view>

 		<view class="" style="height: 200rpx;">

 		</view>

 		<view class="bottom_btn">
 			<view class="btn" @click="applyFn" style="background: linear-gradient(135deg, #2AD03D 0%, #00B815 100%);">
 				提交</view>
 		</view>

 		<u-picker :show="reasonShow" :columns="reasonList" keyName="label" @confirm="reasonFn"
 			@cancel="this.reasonShow=false" confirmColor="#2AD03D"></u-picker>
 	</view>
 </template>

 <script>
 	export default {

 		data() {
 			return {
 				numIcon: false, //图标
 				selectItem: '', //不影响二次销售

 				confirm: {
 					title: '温馨提示',
 					font: '确定退款并取消当前订单吗？'
 				},
 				tips: {
 					font: '申请退款成功',
 					font2: '退款自动退回微信账户',
 					img: '../../static/img/gou.png',
 					color: '#FF8326'
 				},
 				value: '',
 				action: '',
 				fileList: [],
 				refundData: {},
 				option: {},
 				orederData: {},
 				reasonShow: false,
 				reasonList: [],
 				form: {
 					orderId: '',
 					reason: '',
 					remark: '',
 					integral: '',
 					amount: '',
 					imgs: '',
 					rattan: ''
 				},
 				form1: {
 					orderId: '',
 					reason: '',
 					remark: '',
 					integral: '',
 					amount: '',
 					imgs: '',
 					rattan: ''
 				},
 				images: null,
 				returnId: '',
 			}
 		},
 		onLoad(option) {
 			console.log(option, "参数");
 			this.option = option
 			this.getfrontendOrderFn()
 			this.getfrontendListFn()
 		},
 		methods: {
 			// 选择图标
 			selectIcon(item) {
 				this.numIcon = !this.numIcon
 				console.log(item);
 				this.selectItem = item
 			},
 			// 获取退款详情
 			getfrontendOrderFn() {
 				this.$api.refundAmount({
 					id: this.option.goodId,
 					type: this.option.type

 				}).then(res => {
 					this.orederData = res.data
 					console.log('订单详情----退款', res.data);
 				})

 			},
 			// 获取退款原因
 			getfrontendListFn() {
 				this.$api.frontendList({}).then(res => {
 					// console.log('退款原因data', res.data);
 					this.reasonList = [res.data]
 					console.log(this.reasonList, 'this.reasonList');
 				})

 			},
 			// 选择退款原因
 			reasonFn(e) {
 				console.log('e', e);
 				this.form.reason = e.value[0].value
 				this.form.reaFont = e.value[0].label
 				this.reasonShow = false
 			},
 			// 申请退款
 			applyFn() {
 				if (!this.form.reason) {
 					return uni.showToast({
 						icon: 'none',
 						title: '请选择退款原因',
 						duration: 1000
 					})
 				} else if (this.selectItem == 1) {
 					return uni.showToast({
 						icon: 'none',
 						title: '不影响二次销售',
 						duration: 1000
 					})
 				} else {
 					console.log(this.images, 'this.images');
 					let imgs = null
 					if (typeof this.images == "string") {
 						imgs = this.vuex_imgUrl + this.images
 					} else if (Array.isArray(this.images)) {
 						let newArr = this.images.map(item => {
 							return this.vuex_imgUrl + item
 						})
 						imgs = newArr.join(',')
 					}
 					if (this.option.type == 2) {
 						// 退订单
 						this.$api.initiateRefund({
 							"amount": this.orederData.refundAmount,
 							"orderId": this.orederData.orderId,
 							"imgs": imgs,
 							"rattan": this.orederData.refundRattan,
 							"reason": this.form.reason,
 							"remark": this.form.remark,
 						}).then(res => {
 							if (res.code == 200) {
 								uni.showToast({
 									title: "提交成功",
 									icon: "success",
 									duration: 1000
 								})
 								setTimeout(() => {
 									uni.redirectTo({
 										url: '/pages/order/pages/refundDetails?id=' + res.data
 									})
 								}, 1000)
 							}
 							// console.log(res, "申请订单退款");

 						})
 					} else {

 						// 单个商品申请退款
 						this.$api.initiateRefundByGoods({
 							"amount": this.orederData.refundAmount,
 							"orderItemId": this.orederData.id,
 							"imgs": imgs,
 							"rattan": this.orederData.refundRattan,
 							"reason": this.form.reason,
 							"remark": this.form.remark,
 						}).then(res => {
 							if (res.code == 200) {
 								uni.showToast({
 									title: "提交成功",
 									icon: "success",
 									duration: 1000
 								})
 								setTimeout(() => {
 									uni.redirectTo({
 										url: '/pages/order/pages/refundDetails?id=' + res.data
 									})
 								}, 1000)
 							}
 							console.log(res, "单个商品申请退款");

 						})
 					}

 				}



 			},
 		}
 	}
 </script>

 <style lang="scss" scoped>
	 ::v-deep .u-textarea.data-v-09988a29 {
	 	background-color: #F7F7F7;
	 	border: none;
	 
	 }
 	.co-bg {
 		width: 750rpx;
 		height: 320rpx;
 		background: linear-gradient(180deg, #E6F6E9 0%, #FFFFFF 100%);
 		position: absolute;
 		z-index: -1;
 		top: 0;
 		left: 0;
 	}

 	.address {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		position: relative;
 		z-index: 3;
 		padding: 20rpx 32rpx 24rpx 20rpx;
 		border-bottom: 8rpx solid #F6F6F6;

 		.ad-icon {
 			width: 48rpx;
 			height: 48rpx;
 			margin-right: 16rpx;
 		}

 		.ad-go {
 			width: 20rpx;
 			height: 20rpx;
 		}

 		.ad-please {
 			font-size: 28rpx;
 			color: #666666;
 		}

 		.ad-info {
 			font-size: 32rpx;
 			font-weight: bold;
 			color: #1A1A1A;
 		}

 		.ad-font {
 			font-size: 24rpx;
 			font-weight: 400;
 			color: #666666;
 			margin-top: 16rpx;
 		}
 	}

 	.sc-shop {
 		border-radius: 12rpx;
 		position: relative;
 		display: flex;
 		padding: 18rpx 32rpx;
 		border-bottom: 8rpx solid #F6F6F6;

 		.sc-img {
 			width: 160rpx;
 			height: 160rpx;
 			border-radius: 12rpx 0rpx 0rpx 12rpx;
 			overflow: hidden;
 			position: relative;
 			flex: none;

 			.sc-end {
 				position: absolute;
 				bottom: 0;
 				left: 0;
 				width: 100%;
 				height: 40rpx;
 				background: linear-gradient(135deg, #2AD03D 0%, #00B815 100%);
 				border-radius: 12rpx;
 				font-size: 20rpx;
 				color: #FFFFFF;
 				text-align: center;
 				line-height: 38rpx;
 			}

 			image {
 				width: 100%;
 				height: 100%;
 			}
 		}

 		.sc-right {
 			padding: 0rpx 0rpx 0rpx 28rpx;
 			width: 500rpx;

 			.sc-title {
 				font-size: 32rpx;
 				color: #343840;
 			}

 			.sc-num {
 				font-size: 28rpx;
 				font-weight: bold;
 				color: #1A1A1A;
 			}

 			.sc-price {
 				font-size: 48rpx;
 				font-weight: 800;
 				color: #EE3B31;

 				text {
 					font-size: 24rpx
 				}
 			}

 			.sc-text {
 				font-size: 24rpx;
 				font-weight: 400;
 				color: #999999;
 				margin: 14rpx 0;
 			}
 		}
 	}

 	.expense {
 		.ex-box {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
 			padding: 24rpx 32rpx;
 			border-bottom: 1rpx solid #e6e6e6;

 			&:nth-last-child(1) {
 				border-bottom: 8rpx solid #e6e6e6;
 			}

 			.ex-text {
 				font-size: 32rpx;
 				color: #333333;
 			}
 		}

 		.ex-title {
 			font-size: 32rpx;
 			font-weight: bold;
 			color: #333333;
 		}

 		.ex-check {
 			font-size: 28rpx;
 			font-weight: 400;
 			color: #999999;
 			display: flex;
 			align-items: center;

 			image {
 				width: 20rpx;
 				height: 20rpx;
 				border-radius: 0rpx;
 				margin-left: 12rpx;
 			}
 		}

 		.ex-remark {
 			padding: 32rpx;
 			padding-bottom: 0rpx;
 			box-sizing: border-box;

 			.ex-area {
 				width: 686rpx;
 				height: 200rpx;
 				background: #F6F6F6;
 				border-radius: 8rpx;
 				font-size: 24rpx;
 				font-weight: 400;
 				color: #999999;
 				line-height: 24rpx;
 				margin-top: 20rpx;
 				// padding: 20rpx;
 				padding: 20rpx 0rpx 0rpx 20rpx;
 				box-sizing: border-box;

 				textarea {}
 			}

 			.ex-inner {
 				margin-top: 20rpx;

 				.upload-img {
 					width: 160rpx;
 					height: 160rpx;
 					margin: 10rpx;
 					margin-left: 0;
 				}
 			}
 		}
 	}
 </style>